
<template>
  
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view class="view nav-sidebar" name="NavSidebar"></router-view>
  <div class = "lmr-layout">
    <div>
      <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
    </div>
 
    <div class = "main-layout">
      <router-view class="view main-content"></router-view>
    </div>
    <div class = "right-layout">
      <router-view class="view right-sidebar" name="RightSidebar"></router-view>
    </div>
  </div>
  
  
  
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.lmr-layout {
  width:90%;
  margin:0 auto;
  display:flex;
  .main-layout {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    margin:60px 0;
  }
  .right-layout{
    flex:0 0 200px;
  }
}

</style>
